<template>
  <div style="background-color: #F5F5F7;">
  <div class="page paydemo">
    <div class="blog-container" id="container" style="margin-top: 80px">
      <div class="content" style="padding-top: 30px">
        <div style="width: 100%;">
          <div class="paydemo-type-content" style="background-color: rgb(255,242,224);color: rgb(68,181,73)">
           <p>支付系统使用Jeepay搭建，支持微信、支付宝、云闪付的服务商和普通商户模式下单，该页面提供Jeepay支付体验流程。</p>
          </div>
          <div class="paydemo-type-content">
            <div class="paydemo-type-name">微信支付</div>
            <div class="paydemo-type-body">
              <div v-for="item in weixinPayList" :key="item.id" @click="handelActive(item.code)">
                <div :class="item.code==currentActive?'colorChange':'paydemoType'" :code="item.code">
                  <img :src="item.img" class="paydemo-type-img">
                  <span class="color-change">{{item.title}}</span>
                </div>
              </div>

              <div style="position: relative">
                  <div class="paydemo-type-h5" code="WX_H5" @click="handelActive('WX_H5')" @mouseover="hover = true" @mouseleave="hover = false">
                    <img src="./imgs/wechat/wx_h5.svg" class="paydemo-type-img">
                    <span>微信H5</span>
                  </div>
                <div class="paydemo-type-h5 layui-hide codeImg_wx_h5" v-if="this.hover">
                  <img style="width: 120px;height: 120px;padding-bottom: 10px" src="./imgs/wechat/wx_native.svg">
                  <span >请使用手机浏览器扫码</span>
                </div>
              </div>
            </div>
            <div class="paydemo-type-name">支付宝支付</div>
            <div class="paydemo-type-body">
              <div v-for="item in zhifubaoPayList" :key="item.id" @click="handelActive(item.code)">
                <div :class="item.code==currentActive?'colorChange':'paydemoType'" :code="item.code">
                  <img :src="item.img" class="paydemo-type-img">
                  <span class="color-change">{{item.title}}</span>
                </div>
              </div>
              <div style="position: relative">
                <div class="paydemo-type-h5" code="ALI_WAP" @click="handelActive('ALI_WAP')"  @mouseover="alihover = true" @mouseleave="alihover = false">
                  <img src="./imgs/ali/ali_wap.svg" class="paydemo-type-img">
                  <span>支付宝WAP</span>
                </div>
                <div class="paydemo-type-h5 layui-hide codeImg_wx_h5" v-if="this.alihover">
                  <img style="width: 120px;height: 120px;padding-bottom: 10px" src="/jee/images/payType/pay_h5.png">
                  <span>请使用手机浏览器扫码</span>
                </div>
              </div>
            </div>

            <div class="paydemo-type-name">聚合支付</div>
            <div class="paydemo-type-body">
              <div v-for="item in juhePayList" :key="item.id" @click="handelActive(item.code)">
                <div :class="item.code==currentActive?'colorChange':'paydemoType'"  :code="item.code">
                  <img :src="item.img" class="paydemo-type-img">
                  <span class="color-change">{{item.title}}</span>
                </div>
              </div>
            </div>
          </div>

          <div class="paydemo-type-content">
            <div class="paydemo-type-name">支付信息</div>
            <form class="layui-form">
              <div class="paydemo-form-item">
                <label>订单编号：</label><span >{{payMchOrderNo}}</span>
                <span id="randomOrderNo" class="layui-btn layui-btn-xs paydemo-btn" @click="refreshSno">刷新订单号</span>
              </div>
              <div class="paydemo-form-item">
                <label>商品名称：</label>
                <span id="paySubject">支付接口演示</span>
              </div>
              <div class="paydemo-form-item">
                <label>支付金额(元)：</label>
<!--                <div id="paydemo-amount"></div>-->
                <a-radio-group v-model="paymoneyvalue" @change="paymoneyvalueChange">
                  <a-radio :value="item.value" v-for="(item,index) in paymoneyList" :key="index">
                    {{item.label}}
                  </a-radio>
                  <a-radio :value="6">
                    自定义金额
                  </a-radio>
                </a-radio-group>
                <a-input-number v-if="this.paymoneyShow" type="text" size="small" :step="0.01" :min="0" :max="100000" placeholder="请输入金额" class="layui-input layui-hide" style="width: 120px;" v-model="totalMoney"/>
<!--                <input  id="amountInput" name="amountInput" value="" placeholder="请输入金额" class="layui-input layui-hide" style="width: 120px;" />-->
              </div>
              <div style="margin-top:20px;text-align: right">
                <span style="color: #FD482C;font-size: 18px;padding-right: 10px;" >{{totalMoney}}</span>
                <button class="layui-btn" lay-submit lay-filter="payTest" style="background-color: #1953ff;border-radius: 5px;" @click="pay">立即支付</button>
              </div>
              <div style="margin-top:5px;text-align: right">
                <span style="color: rgb(68, 181, 73);font-size: 12px;">登录后支付，可发起退款</span>
              </div>
            </form>
          </div>
        </div>

        <div class="paydemo-type-content" style="background-color: #ffffff">
          <div class="paydemo-type-name">
            <span>最新支付</span>
            <button id="refresh" subTime="9" initSubTime="9" class="layui-btn layui-btn-xs paydemo-btn" style="margin-top: 3px" @click="refreshOrder">刷新</button>
          </div>
          <a-table
            :columns="table.columns"
            :dataSource="table.data"
            :loading="table.loading"
            :rowKey="record => record.userId"
            :pagination="true"
          >
            <span slot="status" slot-scope="text,record">
               <a-tag color="orange" v-if="record.status=='1'">待支付</a-tag>
            </span>
        <span slot="action" slot-scope="text,record">
        <a-button  size="small">退款</a-button>
        </span>
       </a-table>
       </div>
      </div>
    </div>
<!--  条码支付弹框-->
    <a-modal v-model="visible" title="条码支付" :footer="null" :width="350">
    <div >
      <div style="padding-bottom: 15px;color: #999999;">{{contentTitle}}</div>
      <div style="display: flex;flex-direction: row;justify-content: space-between">
        <input type="text" id="authCode" value="" class="layui-input" style="font-size: 14px;width: 210px;" />
        <button class="layui-btn" id="confirmPay" style="background-color: #1953ff;">确认支付</button></div>
      <div style="padding-top: 15px;color: #999999;">或使用(扫码枪/扫码盒)扫码：</div>
      <div style="display: flex;flex-direction: row;justify-content: center;padding-top: 20px;"><img src="./imgs/demo_scan.png" /></div>
    </div>
    </a-modal>
    <a-modal v-model="barvisible" title="条码支付" :footer="null" :width="350">
      <div style="display: flex; flex-direction: column;align-items: center;">
<!--        <img :src="payCodeimg" />-->
        <vue-qr :logo-src="logoSrc"
                :size="191"
                :margin="0"
                :auto-color="true"
                :dot-scale="1"
                :text="appSrc" />
        <div style="padding-top: 20px;  display: flex; flex-direction: row;align-items: center;justify-content: center;">
          <img style="width: 25px;padding-right: 5px;" :src="icon" />
          <img v-if="this.currentActive === 'QR_CASHIER'" style="width: 25px;padding-right: 5px;" :src="icon_j" />
          {{bottomTitle}}
        </div>
      </div>
    </a-modal>

    <a-modal v-model="moneyConfirm" title="信息" :footer="null" :width="350">
     <p>请输入正确的金额，0-100000之间最多两位小数</p>
    </a-modal>
  </div>
  </div>
</template>

<script>
import VueQr from 'vue-qr'
export default {
  name: 'demo',
  components: {
    VueQr
  },
  data () {
    return {
      payMchOrderNo: 'M16258375660088878', // 订单编号
      logoSrc: '',
      appSrc: 'http://www.baidu.com', // 根据url生成二维码
      moneyConfirm: false, // 输入的金额不符合条件的弹框
      hover: false,
      alihover: false,
      visible: false, // 条码支付弹框
      contentTitle: '', // 弹框支付标题
      bottomTitle: '', // 请使用微信"扫一扫"扫码支付
      barvisible: false, // 条码支付弹框
      payCodeimg: '',
      icon: '',
      icon_j: '',
      currentActive: 'WX_NATIVE', // 当前点击
      weixinPayList: [
        {img: require('./imgs/wechat/wx_native.svg'), title: '微信二维码', code: 'WX_NATIVE'},
        {img: require('./imgs/wechat/wx_bar.svg'), title: '微信条码', code: 'WX_BAR'},
        {img: require('./imgs/wechat/wx_jsapi.svg'), title: '公众号/小程序', code: 'WX_QR_CASHIER'}
      ],
      zhifubaoPayList: [
        {img: require('./imgs/ali/ali_qr.svg'), title: '支付宝二维码', code: 'ALI_QR'},
        {img: require('./imgs/ali/ali_bar.svg'), title: '支付宝条码', code: 'ALI_BAR'},
        {img: require('./imgs/ali/ali_jsapi.svg'), title: '支付宝生活号', code: 'ALI_QR_CASHIER'},
        {img: require('./imgs/ali/ali_pc.svg'), title: '支付宝PC网站', code: 'ALI_PC'}
      ],
      juhePayList: [
        {img: require('./imgs/qr/qr_cashier.svg'), title: '聚合扫码(用户扫商家)', code: 'QR_CASHIER'},
        {img: require('./imgs/qr/auto_bar.svg'), title: '聚合条码(商家扫用户)', code: 'AUTO_BAR'}
      ],
      paymoneyList: [ // 支付金额列表
        {
          label: '0.01',
          value: 0.01
        },
        {
          label: '0.22',
          value: 0.22
        },
        {
          label: '0.55',
          value: 0.55
        },
        {
          label: '0.66',
          value: 0.66
        }
      ],
      paymoneyvalue: 0.01,
      totalMoney: 0.01,
      paymoneyShow: false,
      table: {
        data: [
          {
            sno: '1111',
            money: '222',
            payWay: '333',
            status: '0',
            identity: '555',
            createdTime: '2021-01-09 13:09:01'
          },
          {
            sno: '1111',
            money: '222',
            payWay: '333',
            status: '1',
            identity: '555',
            createdTime: '2021-01-09 13:09:01'
          }, {
            sno: '1111',
            money: '222',
            payWay: '333',
            status: '2',
            identity: '555',
            createdTime: '2021-01-09 13:09:01'
          }, {
            sno: '1111',
            money: '222',
            payWay: '333',
            status: '3',
            identity: '555',
            createdTime: '2021-01-09 13:09:01'
          }, {
            sno: '1111',
            money: '222',
            payWay: '333',
            status: '4',
            identity: '555',
            createdTime: '2021-01-09 13:09:01'
          }
        ],
        loading: false,
        columns: [
          {
            title: '订单编号',
            dataIndex: 'sno'
          },
          {
            title: '支付金额',
            dataIndex: 'money'
          },
          {
            title: '支付方式',
            dataIndex: 'payWay'
          },
          {
            title: '支付状态',
            scopedSlots: { customRender: 'status' }
            // dataIndex: 'status'
          },
          {
            title: '客户IP',
            dataIndex: 'identity'
          }, {
            title: '创建时间',
            dataIndex: 'createdTime'
          },
          {
            title: '操作',
            width: '100px',
            scopedSlots: { customRender: 'action' }
          }
        ]
      },
      page: {
        index: 1,
        size: 10,
        total: 0
      }
    }
  },
  methods: {
    // 刷新订单号
    refreshSno () {
    },
    // 刷新订单列表
    refreshOrder () {
    },
    // 判断自定义金额
    paymoneyvalueChange (e) {
      this.totalMoney = null
      // eslint-disable-next-line eqeqeq
      if (e.target.value == '6') {
        this.paymoneyShow = true
      } else {
        this.totalMoney = e.target.value
        this.paymoneyShow = false
      }
    },
    // 立即支付
    pay () {
      if (this.totalMoney > 0) {
        if (this.currentActive === 'WX_BAR') { // 微信条码
          this.contentTitle = '请输入微信条码'
          this.visible = true
        } else if (this.currentActive === 'ALI_BAR') { // 支付宝条码
          this.contentTitle = '请输入支付宝条码'
          this.visible = true
        } else if (this.currentActive === 'AUTO_BAR') { // 聚合
          this.contentTitle = '请输入微信或支付宝条码'
          this.visible = true
        } else if (this.currentActive === 'WX_NATIVE' || this.currentActive === 'WX_QR_CASHIER') { // 微信二维码、公众号、小程序
          this.payCodeimg = require('./imgs/wechat/w_pay.png')
          // 获取微信支付二维码、的url
          // this.appSrc =
          this.icon = require('./imgs/wechat/wx_app.svg')
          this.bottomTitle = '请使用微信"扫一扫"扫码支付'
          this.barvisible = true
        } else if (this.currentActive === 'ALI_QR' || this.currentActive === 'ALI_QR_CASHIER') { // 支付宝二维码、支付宝生活号
          this.payCodeimg = require('./imgs/wechat/w_pay.png')
          // 获取支付宝支付二维码、的url
          // this.appSrc =
          this.icon = require('./imgs/ali/ali_app.svg')
          this.bottomTitle = '请使用支付宝"扫一扫"扫码支付'
          this.barvisible = true
        } else if (this.currentActive === 'QR_CASHIER') { // 聚合
          this.payCodeimg = require('./imgs/wechat/w_pay.png')
          // 获取微信，支付宝支付二维码、的url
          // this.appSrc =
          this.icon = require('./imgs/wechat/wx_app.svg')
          this.icon_j = require('./imgs/ali/ali_app.svg')
          this.bottomTitle = '支持微信、支付宝扫码'
          this.barvisible = true
        }
      } else {
        this.moneyConfirm = true
      }
    },
    // 当前选择的支付类型
    handelActive (index) {
      this.currentActive = index
    },
    onPageChange (page) {
      this.page.index = page
      this.search()
    },
    onPageSizeChange (pageSize) {
      this.page.size = pageSize
      this.search()
    }
  }
}
</script>

<style scoped lang="less">
@import "style.less";
</style>
